<template>
  <div id="cundan">
    <div class="biaoge">
      <div class="query">
        <!-- --------------- -->
        <div class="sTitle homeTitle">
          <span>同业存单</span>
          <el-input placeholder="搜索存单代码" v-model="search" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
          </el-input>
        </div>
        <div class="queryCon">
          <div class="qSeles">
            <!-- 两个选择 -->
            <div class="xuanze">
              <div class="xuanzeCon">
                <span>选择行社\机构：</span>
                <!-- <el-input v-model="banks" placeholder="点击进行多选" size="mini"></el-input> -->
                <el-tooltip :content="banks? banks: '未选择任何行社/机构'" placement="top">
                  <el-button size="small" @click="morechoose">点击进行多选</el-button>
                </el-tooltip>
              </div>
              
              <!-- ------------------------------------ -->
              <div class="xuanzeCon">
                <span>购入日期：</span>
                 <el-date-picker
                    size="small"
                    v-model="sqDate"
                    type="daterange"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
              </div>
            </div>
            <!-- 按钮 -->
            <div class="btnAb">
              <el-button type="primary" size="small" @click="getdata(1)">查询</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="city" label="地市" align="center"></el-table-column>
          <el-table-column prop="bank" label="行社" align="center"></el-table-column>
          <el-table-column prop="code" label="存单代码" align="center"></el-table-column>
          <el-table-column prop="simple" label="存单简称" align="center"></el-table-column>
          <el-table-column prop="couponRate" label="票面利率（%）" align="center"></el-table-column>
          <el-table-column prop="transactionNumber" label="成交编号" align="center"></el-table-column>
          <el-table-column prop="transactionDate" label="购入结算日期" align="center" :formatter='dateTable' width="110"></el-table-column>
          <el-table-column prop="totalFace" label="券面总额（万元）" align="center"></el-table-column>
          <el-table-column prop="settlementMoney" label="账面价值（万元）" align="center"></el-table-column>
          <el-table-column prop="yield" label="到期收益率（%）" align="center"></el-table-column>
          <el-table-column prop="accruedInterest" label="应计利息（元/百元面额）" align="center"></el-table-column>
          <el-table-column prop="netWorth" label="买入净价（元/百元面额）" align="center"></el-table-column>
          <el-table-column prop="fullPrice" label="买入全价（元/百元面额）" align="center"></el-table-column>
          <el-table-column prop="term" label="剩余期限" align="center"></el-table-column>
          <el-table-column prop="saleNum" label="卖出金额(万元)" align="center"></el-table-column>
          <el-table-column prop="occupyNum" label="占用总额(万元)" align="center"></el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="godetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "cundan",
  data() {
    return {
      search: "",
      banks: "",
      time: "",
      tableData: [],
      total: null,
      currentPage: 1,
      sqDate: '',
      dqDate: '',
      status: this.$route.query.status,
      obj: '',
    };
  },
  beforeDestroy: function() {
    this.$bus.$emit("chooseBank");
  },
  methods: {
    getdata (val) {
      this.currentPage = val;
      let obj = {
        bank: this.banks,
        code: this.search,
        startTime: this.dateMoment(this.sqDate[0], 'YYYY-MM-DD'),
        endTime: this.dateMoment(this.sqDate[1], 'YYYY-MM-DD'),
        page: this.currentPage,
      }
      this.obj = obj;
      this.axios.get('innerBankSavingDetailHold/selectList',{params:this.filterNoneObj(obj)})
        .then(({data})=> {
          this.tableData = data.data;
          this.total = data.pageInfo.total;
        })
    },
    godetail (row) {
      sessionStorage.setItem('cundanParams', JSON.stringify(this.obj));
      this.$router.push({name: 'cundanDetail',query: {id: row.id,day: row.term}});
    },
    paramsGetdata () {
      let obj = JSON.parse(sessionStorage.getItem('cundanParams'));
      this.obj = obj;
      this.banks = obj.bank;
      this.search = obj.code;
      this.sqDate = [obj.startTime, obj.endTime];
      this.currentPage = obj.page;
      this.axios.get('innerBankSavingDetailHold/selectList',{params:this.filterNoneObj(obj)})
        .then(({data})=> {
          this.tableData = data.data;
          this.total = data.pageInfo.total;
        })
    },
    morechoose() {
      this.$bus.$emit("chooseBank", {
        callback: (banks) => {
          let banksName = [];
          let banksId = [];
          banks.forEach((item, index) => {
            banksName.push(item.bName);
            banksId.push(item.bId);
          });
          this.banksArr = banksName;
          this.banks = banksName.join(',');
          this.banksId = banksId;
        }
      });
    },
     // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    },
  },
  beforeRouteEnter(to, from, next){
    next(vm=>{
      if(from.path=='/cundanDetail' && sessionStorage.cundanParams) {
        vm.paramsGetdata();
      } else {
        vm.getdata(1);
        sessionStorage.removeItem('cundanParams');
      }
    })
  },
};
</script>

<style lang="scss">
#cundan {
    .biaoge {
    // background-color: white;
    .sTitle {
      margin-top: 40px;
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      border-bottom: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-input {
        width: 400px;
        margin-right: 20px;
      }
    }
  }
  .queryCon {
    padding: 20px 20px;
    .qSeles {
      .xuanze {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 10px;
        margin-top: 10px;
        .xuanzeCon {
          height: 40px;
          display: flex;
          align-items: center;
          margin-right: 30px;
          .el-input {
            width: 200px;
          }
        }
      }
      .btnAb {
        margin-top: 30px;
        .el-button {
          margin-right: 30px;
        }
      }
    }
  }
  .tablecon {
    padding: 20px;
  }
  .pgfy {
    padding: 20px;
    padding-top: 10px;
    text-align: right;
  }
}
</style>